<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-if="RevampModalObj.isShow">
      <div class="modal-ctrl-main map-ctrl">
        <div class="modal-title">
          <p>修改三圈信息</p>
        </div>
        <div class="modal-ctrl-content clear-false">

          <div class="map-body f-l">
            <threeCircles
              ref="threeCircles"
              :line-symbol-color="AddData.STYLE.COLOR"
              :line-symbol-width="lineSymbolWidth"
              :line-symbol-style="lineSymbolStyle"
              :rings="rings"
              :pointDataStr="pointDataStr"
              @graphicJSON="graphicJSON"
              @addPointData="addPointData">
            </threeCircles>
          </div>
          <div class="map-body f-l" :style="{right: openMapDataContentIsShow ? '0':'-640px'}">

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                名称：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddData.NAME" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                所属单位：
              </div>
              <select @change="selectDistrict" v-model="AddData.DEPARTMENT" class="modal-text">
                <option value="-1">选择所属单位</option>
                <option v-for="item in areaList" :value="item.targetMenuCode">{{ item.name }}</option>
               <!-- <option value="CD">蔡甸</option>
                <option value="DH">东湖</option>
                <option value="DXH">东西湖</option>
                <option value="DX">东新</option>
                <option value="HY">汉阳</option>
                <option value="HS">洪山</option>
                <option value="HP">黄陂</option>
                <option value="JA">江岸</option>
                <option value="JH">江汉</option>
                <option value="JX">江夏</option>
                <option value="KFQ">开发区</option>
                <option value="QK">硚口</option>
                <option value="QS">青山</option>
                <option value="WC">武昌</option>
                <option value="XZ">新洲</option>-->
              </select>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                等级：
              </div>
              <select @change="selectGrade" v-model="AddData.GRADE" class="modal-text">
                <option value="-1">选择等级</option>
                <option value="1">一级</option>
                <option value="2">二级</option>
                <option value="3">三级</option>
              </select>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                分类：
              </div>
              <select @change="selectTYPE" v-model="AddData.CLASSIFICATION" class="modal-text">
                <option value="-1">选择分类</option>
                <option v-for="item in typeList" :value="item.targetMenuCode">{{ item.name }}</option>
               <!-- <option value="YQ">医圈</option>
                <option value="SQ">商圈</option>
                <option value="XQ">校圈</option>-->
              </select>
            </div>

            <div class="modal-row f-l">
              <div class="modal-form-key f-l indispensable">
                线段颜色：
              </div>
              <div class=""></div>
              <input type="color" style="width: 60%;height: 30px;" v-model=AddData.STYLE.COLOR>
              <!--   <input type="text" v-model=AddData.WIDTH>{{AddData.WIDTH}}
                 <input type="text" v-model=AddData.WIDTH>{{AddData.WIDTH}}-->
            </div>

            <div class="modal-row f-l">
              <div class="modal-form-key f-l indispensable">
                线宽：
              </div>
              <div class="select-line-style-box f-l"  @click="clickSelectLine">
                <span>{{AddData.STYLE.WIDTH}}</span>
                <ul class="select-line" v-show="selectLineIsShow">
                  <li v-for="line in selectLine" @click="selectLineStyle(line)" :value="line"></li>
                </ul>
              </div>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                备注：
              </div>
             <!-- <input v-model="AddData.COMMENTS" type="text" class="modal-text f-l">-->
              <textarea v-model="AddData.COMMENTS" maxlength="100" class="modal-text f-l"></textarea>
            </div>

            <div class="clear-float"></div>

            <div class="import-point-body">
              <p class="title">重点部位点位信息</p>
              <div class="point-list-body">

                <div v-for="(pointItem,index) in pointListObj" class="point-list clear-true">
                  <button class="btn btn-warning" @click="deleteListPoint(pointItem,index)">删除</button>
                  <div class="clear-float"></div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      名称：
                    </div>
                    <input v-model="pointItem.name" maxlength="16" placeholder="最长16个字符" type="text" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      地址：
                    </div>
                    <input v-model="pointItem.address" maxlength="64" placeholder="最长64个字符" type="text" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      经度：
                    </div>
                    <input v-model="pointItem.longitude"  maxlength="12" type="text" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      纬度：
                    </div>
                    <input v-model="pointItem.latitude"  maxlength="11" type="text" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      所属单位：
                    </div>
                    <input readonly="readonly" v-model="pointItem.district" type="text" class="modal-text f-l">
                    <input v-model="pointItem.districtId" type="hidden" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l">
                      服务电话：
                    </div>
                    <input v-model="pointItem.phone" type="text" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l">
                      占地面积：
                    </div>
                    <input v-model="pointItem.covered_area" maxlength="16" placeholder="最长16个字符" type="text" class="modal-text f-l">
                  </div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l">
                      建筑面积：
                    </div>
                    <input v-model="pointItem.building_area" maxlength="16" placeholder="最长16个字符" type="text" class="modal-text f-l">
                  </div>
                  <div class="clear-float"></div>
                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      大图标：
                    </div>
                    <img class="icon-img" @click="selectBigImgShow(pointItem)" :src="pointItem.bigDisplayImg|setDisplayImg" v-model="pointItem.bigDisplayImg" alt="">
                    <div class="select-icon-body" v-show="pointItem.bigSelectShow">
                      <i class="closeBtn" @click="selectBigImgShow(pointItem)">X</i>
                      <ul class="select-icon-list">
                        <li v-for="imgs in iconLis" @click="selectBigImg(imgs,pointItem)">
                          <img class="icon-img" :src="imgs.STORE_ID|setDisplayImg" alt="">
                          <p>{{ imgs.NAME }}</p>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      小图标：
                    </div>
                    <img class="icon-img" @click="selectSmallImgShow(pointItem)" :src="pointItem.smallDisplayImg|setDisplayImg" v-model="pointItem.smallDisplayImg" alt="">
                    <div class="select-icon-body" v-show="pointItem.smallSelectShow">
                      <i class="closeBtn" @click="selectSmallImgShow(pointItem)">X</i>
                      <ul class="select-icon-list">
                        <li v-for="imgs in iconLis" @click="selectSmallImg(imgs,pointItem)">
                          <img class="icon-img" :src="imgs.STORE_ID|setDisplayImg" alt="">
                          <p>{{ imgs.NAME }}</p>
                        </li>
                      </ul>
                    </div>
                  </div>

                </div>

              </div>
            </div>

          </div>
          <div class="map-data-show"
               :style="{right: openMapDataContentIsShow ? '600px':'-40px'}"
               @click="openMapDataContent"
               title="录入地图信息"
          >
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
   import threeCircles from "../../map/threeCircles/threeCircles"
    export default {
        name: "RevampThreeCircleModal",
        props:["RevampModalObj","selectRowId"],
        data(){
          return{
            graphicsItems: [],
            data:[],
            lineSymbolColor: '#333333',
            lineSymbolWidth: '4',
            lineSymbolStyle: 'solid',
            objectId: null,
            searchObjectId: 0,
            rings: null,
            pointDataStr:"",

            selectLine:["dash_1","solid_2","solid_4","solid_6","solid_8"],
            selectLineIsShow: false,
            AddData:{
              NAME:"",//名称
              DEPARTMENT:"-1",//所属单位
              CLASSIFICATION:"-1",//分类
              GRADE:"-1",//等级
              IMPORT_POINT:[], //重要部位
              CREATE_TIME:"",//创建时间
             /* COLOR:"#333333",//线颜色
              WIDTH:"solid|4",//线宽*/
              STYLE:{
                COLOR:"#333333",
                WIDTH:"solid_4",
              },
              MAP_CODE:"",//地图标识符 新增线路的objectID
              CREATE_USER:"",//创建人
              COMMENTS:"",//备注
            },
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            smallDisplayImg:"static/img/upicon.png",
            bigDisplayImg:"static/img/upicon.png",
            sectionTreeIShow:false,
            stationName:"",
            iconLis:[],
            typeList:[],
            selectObj:{
              bigSelect:false,
              smallSelect:false,
            },
            point:[114.21868761726246, 30.584733852070247],
            actionType:null,
            pointListObj:[],
            districtName:"",
            selectId:"",
            areaList:[],
            openMapDataContentIsShow :false
          }
        },
        components:{
          threeCircles
        },
        filters:{
          setDisplayImg:function(src){
            let value = "";
            ////console.log(src.match(/static/));
            if( src.match(/static/) ){
              value = src.match(/static/).input;
            }else{
              value = baseURL +"api/jp-TIFS-FileCenter-ms/file?businessId="+src;
            }
            return value;
          }
        },
        watch:{
          RevampModalObj:{
            handler(v1){
              if( v1.isShow ){
                //获取所属地区
                this.getAreaList();
                this.selectId = this.selectRowId;
                this.getCircleData();
                this.openMapDataContent();
                this.getTypeList();
              }
            },
            deep:true
          }
        },
        methods:{
          //获取三圈详细信息
          getCircleData(){
            let params = {
              "columns": [
                "*"
              ],
              "conditions": [
                {
                  "field": "ID",
                  "symbol": "=",
                  "value": this.selectId
                }
              ],
              "dataTypeCode": "pointresource",
              "pageSize": -1,
              "tableName": "T_RES_THREE_AREAS"
            };
            this.$axios.post(this.HOST+"/base/query/page",params)
              .then(data=>{
                //console.log(data);
                let successData = data.data.data.list[0];
                for( let paramsKey in this.AddData ){
                  for( let successKey in successData ){
                    if( paramsKey === successKey ){
                      if( successKey === "IMPORT_POINT" ){ //点位解析
                        //console.log(successData[successKey]);
                        this.pointDataStr = successData[successKey];
                        this.pointListObj = JSON.parse(successData[successKey]);
                      }else if(successKey === "STYLE"){ //样式解析
                        //console.log(successData[successKey]);
                        this.AddData.STYLE.COLOR = JSON.parse(successData[successKey])["COLOR"];
                        this.AddData.STYLE.WIDTH = JSON.parse(successData[successKey])["WIDTH"];
                        this.lineSymbolColor = this.AddData.STYLE.COLOR;
                        this.selectLineStyle(this.AddData.STYLE.WIDTH);
                      }else{
                        this.AddData[paramsKey] = successData[successKey]
                      }
                    }
                  }
                }
               this.districtName = successData.DEPARTMENT_PARSE;//点位所属单位
              this.AddData.DEPARTMENT = successData.DEPARTMENT;//点位所属单位ID
                this.searchClick(successData.MAP_CODE);
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //提交
          subBtn(){
            //console.log(this.AddData);
            //console.log(this.pointListObj);
            this.AddData.CREATE_USER = this.isLogin().userId;
            if( this.verifyForm.isNull(this.AddData.NAME) ){
              this.s_alert("名称不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.GRADE) ){
              this.s_alert("等级不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.CLASSIFICATION) ){
              this.s_alert("分类不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.TYPE) ){
              this.s_alert("分类不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.DEPARTMENT) ){
              this.s_alert("所属单位不能为空！");
              return false;
            }
            //重要点位信息验证
            if( this.pointListObj.length > 0 ){
              for( let i=0;i<this.pointListObj.length;i++ ){
                if( this.verifyForm.isNull(this.pointListObj[i].name) ){
                  this.s_alert("第"+ (i+1) +"个重要部位的名称不能为空！");
                  return false;
                }else if( this.verifyForm.isNull(this.pointListObj[i].address) ){
                  this.s_alert("第"+ (i+1) +"个重要部位的地址不能为空！");
                  return false;
                }else if( this.verifyForm.isNull(this.pointListObj[i].big_image) ){
                  this.s_alert("第"+ (i+1) +"个重要部位的大图不能为空！");
                  return false;
                }else if( this.verifyForm.isNull(this.pointListObj[i].small_image) ){
                  this.s_alert("第"+ (i+1) +"个重要部位的小图不能为空！");
                  return false;
                }else if( this.verifyForm.isIphoneOrTell(this.pointListObj[i].phone) ){
                  this.s_alert("第"+ (i+1) +"个重要部位的服务电话格式不正确！");
                  return false;
                }
              }
            }else {
              this.s_alert("请设置重要点位！");
              return false;
            }
            this.AddData.IMPORT_POINT = JSON.stringify(this.pointListObj);
            this.AddData.STYLE = JSON.stringify(this.AddData.STYLE);
            //console.log(JSON.stringify(this.pointListObj));
            //return false;
            //新增线路地图
            if(this.data.length>0){
              this.$axios({
                method: 'post',
                url: mapFeatureServer + '2/updateFeatures', // 1 线 2 圈
                data: 'f=json&features='+JSON.stringify(this.data),
                headers: {"Content-Type": "application/x-www-form-urlencoded"}
              }).then( res => {
                //this.AddData.MAP_CODE = res.data.addResults[0].objectId;
                //console.log(this.AddData.MAP_CODE);
                //this.s_alert('新增成功'+this.objectId);
                //新增线路数据
                let paramsKey = [];
                let paramsValue = [];
                for( let kay in this.AddData ){
                  paramsKey.push(kay);
                  paramsValue.push(this.AddData[kay]);
                }
                //console.log(paramsKey);
                //console.log(paramsValue);
                let params = {
                  "conditions": [
                    {
                      "field": "ID",
                      "symbol": "=",
                      "value": this.selectId
                    }
                  ],
                  "data": this.AddData,
                  "dataTypeCode": "pointresource",
                  "tableName": "T_RES_THREE_AREAS"
                };
                //console.log(params);
                this.$axios.put(this.HOST+"/base/modify",params)
                  .then((data)=>{
                    //console.log(data);
                    if( data.data.success ){
                      this.s_alert("修改成功！");
                      this.s_logwrite("点位信息管理-三圈管理","修改三圈");
                      this.close();
                    }
                  })
                  .catch((err)=>{
                    //console.log(err);
                  })
              })
            }
            else {
              this.s_alert("请先画线");
            }

          },
          //修改三圈
          searchClick(mapCode){
            //console.log(mapCode);
            // 8080
            // [{"geometry":{"spatialReference":{"wkid":4326},"paths":[[[114.22015812416404,30.586023519862792],[114.21819744858571,30.584234165259023],[114.21819744858571,30.584234165259023]]]},"attributes":{"Name":"name"}}]
            //  where=&objectIds=8080&time=&geometry=&geometryType=esriGeometryPolyline&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&f=pjson
            this.$axios({
              method: 'post',
              url: mapFeatureServer + '2/query',
              data: 'where=&objectIds='+mapCode+'&time=&geometry=&geometryType=esriGeometryPolyline&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&gdbVersion=&returnDistinctValues=false&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&f=pjson',
              headers: {"Content-Type": "application/x-www-form-urlencoded"}
            }).then(res => {
              let rings = res.data.features[0].geometry.rings;
              this.rings = res.data.features[0].geometry.rings;

              //console.log(this.rings)
            })
          },
          //获取所属地区
          getAreaList(){
            //POST /dictionary/{key}
          /*  this.$axios.post(this.HOST+"/dictionary/area")
              .then(res=>{
                //console.log(res);
                this.areaList = res.data;

              })
              .catch(err=>{
                //console.log(err);
              })*/
            this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
              "parentMenuCode": "MAP_SSDW",
            })
              .then(res=>{
                /*   //console.log(1);
                   //console.log(res);*/
                let success = res.data;
                let list = [];
                for( let i=0;i<success.length;i++ ){
                  success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                  list.push(success[i]);
                }
                this.areaList = list;
                //console.log(this.areaList);
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //获取类型
          getTypeList(){
            //POST /dictionary/{key}
            this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
              "parentMenuCode": "MAP_SQ",
            })
              .then(res=>{
                /*   //console.log(1);
                   //console.log(res);*/
                let success = res.data;
                let list = [];
                for( let i=0;i<success.length;i++ ){
                  success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                  list.push(success[i]);
                }
                this.typeList = list;
                //console.log(this.typeList);
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //加载图标库
          getIconAjax(){
            //GET /camera/fetchTAllCamera
            //console.log(this.HOST);
            let params = {
              "columns": ["*"],
              "conditions": [],
              "dataTypeCode": "pointresource",
              "pageSize": -1,
              "tableName": "T_RES_IMAGE_LIB",
              "sorters": [
                {
                  "order": "desc", //asc
                  "sortField": "UPLOAD_TIME"
                }
              ],
            };
            //POST /base/query/page
            this.$axios.post(this.HOST+"/base/query/page",params)
              .then((data)=>{
                //console.log(data);
                this.iconLis = data.data.data.list;
                //console.log(this.iconLis);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //选择图标
          selectBigImg(img,item){
            //console.log(img);
            item.big_image = img.ID;
            item.bigDisplayImg = img.STORE_ID;
            this.selectBigImgShow(item);
          },
          selectSmallImg(img,item){
            item.small_image = img.ID;
            item.smallDisplayImg = img.STORE_ID;
            this.selectSmallImgShow(item);
          },
          //大图选择
          selectBigImgShow(item){
            item.bigSelectShow = !item.bigSelectShow;
          },
          selectSmallImgShow(item){
            item.smallSelectShow = !item.smallSelectShow;
          },
          //关闭弹出
          close(){
            this.$emit("closeRevampModal");
            this.clearData();
          },
          //删除重要点位
          deleteListPoint(obj,index){
            ////console.log(obj);
            ////console.log(index);
            this.pointListObj.splice(index,1);
            this.$refs.threeCircles.deletePoint(obj.uid);
          },
          //清除缓存
          clearData(){
            this.AddData={
              NAME:"",//名称
              DEPARTMENT:"-1",//所属单位
              CLASSIFICATION:"-1",//分类
              GRADE:"-1",//等级
              IMPORT_POINT:[], //重要部位
              CREATE_TIME:"",
              /* COLOR:"#333333",//线颜色
               WIDTH:"solid|4",//线宽*/
              STYLE:{
                COLOR:"#333333",
                WIDTH:"solid_4",
              },
              MAP_CODE:"",//地图标识符 新增线路的objectID
              CREATE_USER:"",//创建人
              COMMENTS:"",//备注
            };
            this.pointListObj = [];
            this.openMapDataContentIsShow = false;
          },
          // 获取地图点位数组
          addPointData(graphicsItems){

            this.graphicsItems = graphicsItems;
            //console.log(this.graphicsItems);
            //清除原有的数据
            //this.pointListObj = [];
            //循环得出 点id和经纬度

            let pointData = {};
            pointData.uid = this.graphicsItems.attributes.uid;
            pointData.latitude = this.graphicsItems.geometry.latitude;
            pointData.longitude = this.graphicsItems.geometry.longitude;
            pointData.name = "";//点位名称
            pointData.address = "";//点位地址
            pointData.district = this.districtName;//点位所属单位
            pointData.districtId = this.AddData.DISTRICT;//点位所属单位ID
            pointData.phone = "";//点位服务电话
            pointData.covered_area = "";//点位占地面积
            pointData.building_area = "";//点位建筑面积
            pointData.birthday = "";//点位建成时间
            pointData.big_image = "";//大图标储存id
            pointData.bigDisplayImg = "static/img/upicon.png";//大图标储存id
            pointData.bigSelectShow = false;
            pointData.small_image = "";//大图标储存id
            pointData.smallSelectShow = false;
            pointData.smallDisplayImg = "static/img/upicon.png";//大图标储存id
            this.pointListObj.push(pointData);

          },
          //分类
          selectTYPE(ele){
            //console.log(ele.target.value);
            this.AddData.CLASSIFICATION = ele.target.value;
          },
          selectGrade(ele){
            //console.log(ele.target.value);
            this.AddData.GRADE = ele.target.value;
          },
          //所属单位
          selectDistrict(ele){
            //console.log(ele.target.value);
            //console.log($(ele.target)[0].selectedOptions[0].text);
            this.AddData.DEPARTMENT = ele.target.value;
            this.districtName = $(ele.target)[0].selectedOptions[0].text;
            for( let i=0;i<this.pointListObj.length;i++ ){
              this.pointListObj[i].district = this.districtName;
              this.pointListObj[i].districtId = this.AddData.DEPARTMENT;
            }
          },
          //地图json
          graphicJSON(json){
            json.attributes["OBJECTID"] = parseInt(this.AddData.MAP_CODE);
            json.attributes["Name"] = "name";
            this.data = [
              {
                "geometry": json.geometry,
                "attributes": json.attributes
              }
            ];
            //console.log(JSON.stringify(this.data));
          },

          //选择线样式
          selectLineStyle(style){
            //console.log(style);
            this.AddData.STYLE.WIDTH = style;
            //console.log(this.AddData.STYLE.WIDTH);
            let arrStyle = style.split("_");
            this.lineSymbolStyle = arrStyle[0];
            this.lineSymbolWidth = arrStyle[1];
            //console.log(arrStyle);
          },
          //选择线段隐藏与显示
          clickSelectLine(){
            this.selectLineIsShow = !this.selectLineIsShow
          },
          //展开地图数据录入界面
          openMapDataContent(){
            this.openMapDataContentIsShow = !this.openMapDataContentIsShow;
          }
        },
        mounted(){
          //加载图标库
          this.getIconAjax();
        },
    }
</script>

<style scoped>
  .form-control{
    height: 100%;
    border: 1px solid #ccc;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
